
<template>
  <div class="userMoney-main">
    <!-- fixed -->
    <div class="userMoney-fixed">
      <ul>
        <li v-for="item in tabs" v-bind:class="nowID==item.id?'user-money-active':''" v-on:click="tabList(item.id)">{{item.name}}</li>
      </ul>
    </div>
    <!-- list -->
    <div class="userMoney-ul">
      <div class="userMoney-ul-div">
        <ul>
          <li v-for="(item,index) in list">
            <div class="userMoney-auto">
              <!-- left -->
              <div class="userMoney-box">
                <div class="userMoney-left">
                  {{item.createtime|dataFormat}}
                </div>
                <div class="userMoney-righe">
								<span>
									<a>金额 :</a>
									<a>{{item.money}}</a>
								</span>
                  <span>
									<a>余额 :</a>
									<a>{{item.servicefee}}元</a>
								</span>
                </div>
              </div>
              <div class="userMoney-con">
                <a>内容 :</a>
                <a>{{item.description}}</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- no more -->
    <div class="userMoney-no-more">
      <p @click="moreList" :class="more?'haseMore':''">{{more?'点击加载更多':'没有更多了'}}</p>
    </div>
    <!-- top -->
    <div class="user-money-top">
      <a><img src="../../../static/imgs/totop.png"/></a>
    </div>
    <!-- fixed -->
    <div class="fixed-nav">
      <index-footer></index-footer>
    </div>
  </div>



</template>


<script>
  import listMixins from '../../mixins/listMixins'
  import {userService} from '#/service'
  import IndexFooter from '@/components/base/IndexFooter'
  export default{
    name:'MyAccount',
    components: {
      IndexFooter
    },
    data(){
      return{
        nowID:1,
        Number:0,
        tabs:[
          {
            name:'本金',
            id:1
          },
          {
            name:'佣金',
            id:2
          },
          {
            name:'推广赚金',
            id:6
          }
        ],
        screen:{
          type:1,
          pageIndex:0,
          pageSize:10
        },
        conList:[
          {
            list:[
              {
                time:'2018-07-01',
                money:'200.00',
                total:'100',
                title:'这是内容..........'
              }
            ]
          }
        ]
      }
    },
    created(){
      this.screen.type=this.$route.query.type||1
    },
    methods:{
       tabList:async function(id){
        this.nowID = id;
        this.restList();
        this.screen.type=id;
        await this.queryList(true)
        this.Number = this.nowID;
      },
      restList(){
         this.more=true
         this.screen={
           type:1,
           pageIndex:0,
           pageSize:10
         }
      },
      async query(){
        return await userService.tradeRecords({
          params:this.screen
        })
      },
      moreList(){
         if(!this.more)return
        this.screen.pageIndex++;
        this.queryList()
      }
    },
    mixins:[listMixins]
  }
</script>

<style>
  html,body{
    background: #f5f5f5;
  }
  .userMoney-main{
    width:100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 0.5rem;
  }
  .userMoney-fixed{
    width: 100%;
    height: 0.4rem;
    border-bottom: 0.01rem solid #e6e6e6;
    background: white;
  }
  .userMoney-fixed ul li{
    width: 33.333333%;
    float:left;
    text-align: center;
    color: #333;
    line-height: 0.38rem;
    height: 0.38rem;
    font-size: 0.14rem;
  }
  .userMoney-fixed ul .user-money-active{
    border-bottom: 0.02rem solid rgb(142,10,190);
  }
  .userMoney-ul{
    width: 100%;
    height: 100%;
    float:left;
  }
  .userMoney-ul ul li{
    width: 100%;
    height: 0.74rem;
    float:left;
    margin-bottom: 0.1rem;
    background: white;
  }
  .userMoney-ul ul li:last-child{
    margin-bottom: inherit;
  }
  .userMoney-auto{
    width: 90%;
    margin: 0 auto;
  }
  .userMoney-box{
    width: 100%;
    height: 0.37rem;
    border-bottom: 0.01rem dashed #e6e6e6;
  }
  .userMoney-left{
    float:left;
    line-height: 0.37rem;
    color: #333;
    font-size: 0.12rem;
  }
  .userMoney-righe{
    float: right;
    height: 0.17rem;
    line-height: 0.17rem;
    padding: 0.1rem 0;
  }
  .userMoney-righe span{
    float:left;
    display: block;
    margin-right: 0.05rem;
    border-right: 0.01rem solid #e6e6e6;
  }
  .userMoney-righe span:last-child{
    border-right: inherit;
    margin-right: inherit;
  }
  .userMoney-righe span a{
    display: inline-block;
    float: left;
    color: #333;
    margin-right: 0.05rem;
    font-size: 0.12rem;
  }
  .userMoney-con{
    width: 100%;
    height: 0.37rem;
    line-height: 0.37rem;
    float:left;
  }
  .userMoney-con a{
    display: inline-block;
    float:left;
    margin-right: 0.1rem;
    color:#333;
    font-size: 0.12rem;
  }
  .userMoney-con a:last-child{
    color: #5280ff;
  }
  .userMoney-no-more{
    width: 100%;
    height: 0.37rem;
    line-height: 0.37rem;
    float: left;
  }
  .userMoney-no-more p{
    text-align: center;
    color: rgb(128, 128, 128);
    font-size: 0.13rem;
  }
  .userMoney-no-more .haseMore{
    color: #5280ff;
  }
  .user-money-top{
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #e6e6e6;
    position: fixed;
    bottom: 0.8rem;
    right:0.3rem;
  }
  .user-money-top a{
    display: inline-block;
    float:left;
    margin: 0.1rem 0 0 0.1rem;
    width: 0.2rem;
    height: 0.2rem;
  }
  .user-money-top a img{
    display: block;
    width: 100%;
    height: 100%;
  }
</style>
